<template>
  <div>
    <PageTemplate>
      <div slot="content">
        <PageEditCollapse :is-search="false" :default-collapse="true">
          <div slot="title" class="page-edit-colllapse-title">
            <div style="width: 200px;">{{$t('cm.baseinfo')}}</div>
          </div>
          <div>
            <!-- 高级搜索具体内容 -->
            <el-form
              :model="processInfo"
              label-position="right"
              label-width="150px"
              class="page-edit-colllapse-form"
              :rules="rules"
              ref="processInfo">
              <el-row>
                <el-col :span="12">
                  <el-form-item :label="$t('sys.process_processName')" prop="processName">
                    <el-input v-model="processInfo.processName"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item :label="$t('sys.process_processType')" prop="processType">
                    <el-select v-model="processInfo.processType" filterable placeholder="请选择">
                      <el-option
                        v-for="(item, index) in processTypes"
                        :key="index"
                        :label="item.dictText"
                        :value="item.dictKey"
                      ></el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="12">
                  <el-form-item :label="$t('sys.process_processUrl')" prop="processUrl">
                    <el-input v-model="processInfo.processUrl"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item :label="$t('sys.process_orderIndex')">
                    <el-input v-model="processInfo.orderIndex"></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="12">
                  <el-form-item :label="$t('sys.process_isValid')" prop="isValid">
                    <el-select v-model="processInfo.isValid" filterable placeholder="请选择">
                      <el-option
                        v-for="(item, index) in isValids"
                        :key="index"
                        :label="item.dictText"
                        :value="item.dictKey"
                      ></el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item :label="$t('sys.process_imageCode')">
                    <el-popover
                      placement="right"
                      width="400"
                      trigger="hover"
                      v-model="visiblePopover"
                      >
                      <div style="height: 400px;width: 410px;padding-right: 10px;">
                        <el-scrollbar class="el-scrollbar-select-incon">
                        <SelectIncon @triggerGridItem="handelSelectIcon"></SelectIncon>
                        </el-scrollbar>
                      </div>
                      <el-link :underline="false" slot="reference">
                        <svg-icon :icon-class="processInfo.imageCode" className='form-icon' style="font-size: 25px;vertical-align: -0.25em;"></svg-icon>
                      </el-link>
                    </el-popover>
                  </el-form-item>
                </el-col>
              </el-row>
            </el-form>
            <!-- 查询和重置按钮-->
          </div>
        </PageEditCollapse>
        <el-row class="row-empty-10"></el-row>
        <el-row>
          <el-button type="primary" @click="submitForm('processInfo')" :loading="submiting" class="loading-submiting">
            {{$t('cm.commit')}}
          </el-button>
          <el-button type="primary" @click="toList">
            {{$t('cm.return')}}
          </el-button>
        </el-row>
      </div>
    </PageTemplate>
  </div>
</template>

<script>
import { ALERT } from '@/utils/responseHandle'
import * as Constant from '@/utils/constant'
import PageTemplate from '@/components/common/PageTemplate'
import PageEditCollapse from '@/components/common/PageEditCollapse'
import SelectIncon from './SelectIncon'
import HasBtn from '@/mixins/HasBtn'
import { mapState } from 'vuex'
import {COMMON} from '@/utils/commonUtil'
import sys_manage from '@/api/sys_manage'
import Submiting from '@/mixins/Submiting'
export default {
  components: {
    PageTemplate, PageEditCollapse, SelectIncon
  },
  mixins: [Submiting],
  data () {
    return {
      visiblePopover: false,
      processInfo: {
        id: null,
        processName: null,
        processType: null,
        processUrl: null,
        orderIndex: null,
        isValid: null,
        imageCode: 'scp_home_16'
      },
      processTypes: [],
      rules: {
        processType: [
          { required: true, message: '必选项', trigger: 'change' }
        ],
        processName: [
          { required: true, message: '必填项', trigger: 'blur' }
        ],
        processUrl: [
          { required: true, message: '必填项', trigger: 'blur' }
        ],
        isValid: [
          { required: true, message: '必选项', trigger: 'change' }
        ]
      }
    }
  },
  created () {
    this.sysDictLoadByPaging()
    if (this.$router.history.current.params.id !== Constant.NEW_PARAMS) {
      this.sysProcessGet(this.$router.history.current.params.id)
    }
  },
  methods: {
    sysProcessGet (id) {
      sys_manage.sysProcessGet({id}, result => {
        if (result.code === Constant.RT_SUCCESS) {
          this.processInfo = result.data
          if (!this.processInfo.imageCode) {
            this.processInfo.imageCode = 'scp_home_16'
          }
        } else {
          // _this.$t('cm.tips')
          ALERT.error(result.msg)
        }
      })
    },
    sysDictLoadByPaging () {
      sys_manage.sysDictLoadByPaging({dictGroupKey: 'ProcessType'}, result => {
        if (result.code === Constant.RT_SUCCESS) {
          this.processTypes = result.data
        } else {
          ALERT.error(result.msg)
        }
      })
    },
    submitForm (formName) {
      if (COMMON.isNullOrUndefined(this.processInfo.id)) {
        this.save(formName)
      } else {
        this.update(formName)
      }
    },
    save (formName) {
      this.openSubmiting()
      this.$refs[formName].validate((valid, error) => {
        if (valid) {
          sys_manage.sysProcessSave(this.processInfo, result => {
            if (result.code === Constant.RT_SUCCESS) {
              ALERT.success(result.msg)
              this.toList()
            } else {
              // _this.$t('cm.tips')
              ALERT.error(result.msg)
            }
            this.closeSubmiting()
          })
        } else {
          this.closeSubmiting()
          return false
        }
      })
    },
    update (formName) {
      this.openSubmiting()
      this.$refs[formName].validate((valid, error) => {
        if (valid) {
          sys_manage.sysProcessUpdate(this.processInfo, result => {
            if (result.code === Constant.RT_SUCCESS) {
              ALERT.success(result.msg)
              this.toList()
            } else {
              // _this.$t('cm.tips')
              ALERT.error(result.msg)
            }
            this.closeSubmiting()
          })
        } else {
          this.closeSubmiting()
          return false
        }
      })
    },
    toList () {
      COMMON.routerTo(Constant.ROUTE_SYS_PROCESS.index, this.$router)
    },
    handelSelectIcon (v) {
      this.processInfo.imageCode = v.icon
      this.visiblePopover = false
    }
  },
  mounted () {
  },
  computed: {
    ...mapState({
      isValids: state => state.dict.isValids
    })
  }
}
</script>

<style lang="scss">
.el-scrollbar-select-incon {
    height: 100%;
    width: 100%;
  }
.el-scrollbar-select-incon .el-scrollbar__wrap {
  overflow-x: auto;
}
</style>
